import './App.css'
import ScaleBox from 'react-scale-box';
import { useTranslation } from 'react-i18next'
import screenStyle from './assets/css/screen.module.css';
import dayjs from 'dayjs';
import 'dayjs/locale/zh'
import 'dayjs/locale/en'
import { SettingOutlined } from '@ant-design/icons';
import React, { useState, useRef,createContext  } from 'react';
import Setting from './component/setting.jsx'
import { themes,defaultTheme } from './component/const.js';
import {ThemeContext} from './component/theme.jsx';
// import { BorderBox1 } from '@jiaminghi/data-view-react'
import { Decoration5, Decoration8 } from '@jiaminghi/data-view-react'
let initWidth = 3840;
let initHeight = 2160;
function App() {
  const [width, setWidth] = useState(initWidth);
  const [height, setHeight] = useState(initHeight);
  const { t, i18n } = useTranslation()
  const [theme, setTheme] = useState(themes[defaultTheme]);
  dayjs.locale(i18n.language)
  const formatted4 = dayjs().format('dddd, MMMM D, YYYY,HH:mm:ss');
  const childDrawerRef = useRef(null);
  const showDrawer = () => {
    childDrawerRef.current.showDrawer();
  };
  const adjustView = (width, height) => {
    if (width && height) {
      setWidth(width);
      setHeight(height);
    } else {
      setWidth(initWidth);
      setHeight(initHeight);
    }
  }
  const modifyTheme = (theme) => {
    setTheme(themes[theme]);
  }
  return (
    <ThemeContext.Provider value={theme}>
      <ScaleBox>
        <div className={screenStyle.screen} style={{background:theme.backgroundColor,color:theme.color}}>
          <div className={screenStyle.screen_header}>
            {/* <div className={screenStyle.header_title}>
              <BorderBox1> {t('数据可视化平台')}</BorderBox1>
            </div>
            <div className={screenStyle.header_time}>{formatted4}</div>
            <div className={screenStyle.header_setting}><SettingOutlined onClick={showDrawer} /></div> */}
            <Decoration8 className="header-left-decoration" />
      <Decoration5 className="header-center-decoration" />
      <Decoration8 className="header-right-decoration" reverse={true} />
      <div className="center-title">施工养护综合数据</div>
          </div>
          <div>
          </div>
        </div>
        <Setting ref={childDrawerRef} theme={defaultTheme} changeTheme={modifyTheme} adjustSize={adjustView}></Setting>
      </ScaleBox>
    </ThemeContext.Provider>
  )
}

export default App
